<template>
	<view class="container">
		<u-sticky>
			<view class="bg-white shadow-sm px-4 pb-1">
				<view class="text-primary font-md font-wg-6">{{params.deviceName}}</view>
				<view class="d-flex a-center j-sb">
					<view class="d-flex a-center" @click="dateTimeShow = true">
						<text class="pr-2">{{date}}</text>
						<u-icon name="arrow-down-fill"></u-icon>
					</view>
					<view class="d-flex a-center">
						<u-image width="60rpx" height="60rpx" src="/static/battery.png">
						</u-image>
						<text class="pl-1">{{params.battery}}%</text>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="container-inner">
			<template v-if="totalSize > 0">
				<block v-for="(item,index) in logList" :key="index">
					<view class="card-box">
						<view class="d-flex a-start" :class="[item.ispolice == 0?'text-primary':'text-black']">
							<u-icon class="font-lllg mr-2" :color="item.ispolice == 0?'#D3B98C':'#333'"
								:name="item.ispolice == 0?'checkmark-circle-fill':'close-circle-fill'"></u-icon>
							<view class="flex-1 line-h-sm">
								<view class="word-break-all">{{item.deviceStateTxt}}</view>
								<view class="font-sm pt-2 text-gray">{{item.createTime}}</view>
							</view>
						</view>
					</view>
				</block>
				<view class="pt-4" v-if="loadStatus">
					<u-loadmore :status="loadStatus" />
				</view>
			</template>
			<template v-else>
				<view class="py-4">
					<u-empty text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				</view>
			</template>
		</view>
		<u-datetime-picker :show="dateTimeShow" :value="dateTime" :maxDate="dateTime" mode="date" :formatter="formatter"
			:closeOnClickOverlay="true" @confirm="confirmDatetime" @cancel="closeDatetime" @close="closeDatetime">
		</u-datetime-picker>
	</view>
</template>

<script>
	let siteInfoId = '53e9be60-d4c2-4a8c-97fd-10688a5020a8'
	let authKey = 'bce11724-e075-4be7-bd8c-04bfd0ceed4c'
	import {
		getNowTime,
		fillInStr
	} from '@/common/config/tool';
	export default {
		data() {
			return {
				dateTime: Number(new Date()),
				params: {},
				dateTimeShow: false,
				logList: [],
				date: '',
				page: {
					pageNo: 1,
					pageSize: 10,
				},
				totalSize: 0,
				loadStatus: 'loading'
			};
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			timeCycle(e) {
				const nowDate = getNowTime(e);
				return `${fillInStr(nowDate.year)}-${fillInStr(nowDate.month)}-${fillInStr(nowDate.day)}`;
			},
			getAllDeviceLog(createTime) {
				const {
					siteId,
					deviceId,
					deviceSubType,
					deviceCode
				} = this.params
				let obj = {
					siteId,
					deviceId,
					deviceSubType,
					deviceCode
				}
				this.$api.getAllDeviceLog({
					authKey: authKey,
					...obj,
					createTime,
					...this.page
				}).then(result => {
					this.logList = [...this.logList, ...result.rows];
					this.totalSize = Math.ceil(result.total / this.page.pageSize);
					if (this.page.pageNo == this.totalSize) {
						this.loadStatus = ''
						return false
					}
				});
			},
			confirmDatetime(e) {
				this.logList = []
				if (e.value) {
					let dateCycle = this.timeCycle(e.value)
					this.date = dateCycle
					this.getAllDeviceLog(this.timeCycle(this.date))
				}
				this.closeDatetime()
			},
			closeDatetime() {
				this.dateTimeShow = false
			}
		},
		onReachBottom() {
			if (this.page.pageNo < this.totalSize) {
				this.page.pageNo++;
				this.getAllDeviceLog(this.date);
				return false
			}
		},
		onLoad(options) {
			let params = decodeURIComponent(options.params)
			this.params = JSON.parse(params)
			this.date = this.timeCycle(this.dateTime)
			this.getAllDeviceLog(this.date)
		}
	};
</script>

<style scoped>
	.container-inner {
		height: 100%;
	}
</style>
